<template>
	<div class="tool-title-box">
		<h3>选择器设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">标签名称</div>
				<div class="modify-box">
					<el-input placeholder="请输入标签名称" clearable v-model="activeComponent.data.labelValue"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">属性名称</div>
				<div class="modify-box">
					<el-input placeholder="请输入属性名称" clearable v-model="activeComponent.data.name"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">占位文本</div>
				<div class="modify-box">
					<el-input placeholder="请输入占位文本" clearable v-model="activeComponent.data.placeholder"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">未匹配文本</div>
				<div class="modify-box">
					<el-input placeholder="请输入未匹配文本" clearable v-model="activeComponent.data.noMatchText"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">无数据文本</div>
				<div class="modify-box">
					<el-input placeholder="请输入无数据文本" clearable v-model="activeComponent.data.noDataText"></el-input>
				</div>
			</div>
			<div class="item-box">
				<el-collapse class="w100" accordion>
					<el-collapse-item v-for="(item, index) in activeComponent.data.options" :key="index" :name="index">
						<template #title>
							<el-button-group class="ml-4">
								<el-button type="primary" plain icon="el-icon-plus" @click="onAddGroup" v-if="index === 0 || activeComponent.data.options.length == 1"/>
								<el-button type="danger" plain icon="el-icon-delete" @click="onDelGroup(index)" v-if="activeComponent.data.options.length > 1"/>
							</el-button-group>
							<span class="ml10"><el-input v-model="item.label" class="item-edit-input"></el-input></span>
						</template>
						<div class="collapse-table">
							<el-table :data="item.options" class="w100">
								<el-table-column prop="index" label="操作" width="50px" align="center">
									<template #header>
										<el-button type="primary" icon="el-icon-plus" circle plain size="mini" @click="onAddRow(item.options)"></el-button>
									</template>
									<template #default="scope">
										<el-button type="danger" icon="el-icon-delete" circle plain size="mini" @click="onDelRow(item.options, scope.$index)"></el-button>
									</template>
								</el-table-column>
								<el-table-column prop="name" label="选项名" align="center">
									<template #default="scope">
										<el-input v-model="scope.row.name" class="item-edit-input"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="value" label="选项值" align="center">
									<template #default="scope">
										<el-input v-model="scope.row.value" class="item-edit-input"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="disabled" label="禁用" width="70px" align="center">
									<template #default="scope">
										<el-switch v-model="scope.row.disabled"/>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			
			<div class="item-box">
				<div class="title">组件大小</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.size" placeholder="请选择">
						<el-option label="large" value="large"></el-option>
						<el-option label="medium" value="medium"></el-option>
						<el-option label="small" value="small"></el-option>
						<el-option label="mini" value="mini"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标签宽度</div>
				<div class="modify-box">
					<el-input-number :min="1" :max="24" v-model="activeComponent.data.labelWidth"></el-input-number>
				</div>
			</div>
			<!-- <div class="item-box">
				<div class="title">标签类型</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.tagType" placeholder="请选择">
						<el-option label="default" value=""></el-option>
						<el-option label="primary" value="primary"></el-option>
						<el-option label="success" value="success"></el-option>
						<el-option label="warning" value="warning"></el-option>
						<el-option label="danger" value="danger"></el-option>
						<el-option label="info" value="info"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">背景主题</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.effect" placeholder="请选择">
						<el-option label="light" value="light"></el-option>
						<el-option label="dark" value="dark"></el-option>
					</el-select>
				</div>
			</div> -->
			<div class="item-box">
				<div class="title">是否必填</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.required" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">可筛选</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.filterable" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">保留搜索词</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.reserveKeyword" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否禁用</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.disabled" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">可清空</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.clearable" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否多选</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.multiple" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">最多可选值</div>
				<div class="modify-box">
					<el-input-number :disabled="!activeComponent.data.multiple" v-model="activeComponent.data.multipleLimit" :min="0" placeholder="max"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">按文字展示</div>
				<div class="modify-box">
					<el-switch :disabled="!activeComponent.data.multiple" v-model="activeComponent.data.collapseTag" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">悬停折叠</div>
				<div class="modify-box">
					<el-switch :disabled="!activeComponent.data.multiple" v-model="activeComponent.data.collapseTagsTooltip" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">允许创建</div>
				<div class="modify-box">
					<el-switch :disabled="!activeComponent.data.multiple" v-model="activeComponent.data.allowCreate" active-text="是" inactive-text="否"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';
	
	export default {
		name: 'checkbox-tool',
		components: { },
		setup() {
			const store = useStore();
			const state = reactive({
				
			})
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			const onAddGroup = () => {
				state.activeComponent.data.options.push({
					label: '分组一',
					options: [
						{
							value: '',
							name: '',
							disabled: false,
						},
					]
				})
			};
			const onDelGroup = (k) => {
				state.activeComponent.data.options.splice(k, 1);
			};
			const onAddRow = (options) => {
				options.push({
					value: '',
					name: '',
					disabled: false,
				});
			}
			const onDelRow = (options, k) => {
				options.splice(k, 1);
			}
			
			return {
				onAddGroup,
				onDelGroup,
				onAddRow,
				onDelRow,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>